import React, { useEffect, useRef, useCallback } from 'react';
import * as echarts from 'echarts';
import '../styles/CandlestickChart.css';

const CandlestickChart = ({ data, height = 350, dates = [], showMacd = true }) => {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    // 初始化图表
    if (chartRef.current) {
      // 如果已经有实例，先销毁
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }
      
      // 创建新实例，使用深色主题
      chartInstance.current = echarts.init(chartRef.current, 'dark');
      
      // 更新图表
      updateChart();
    }
    console.log('dates = ',dates);
    
    // 组件卸载时销毁图表
    return () => {
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }
    };
  }, [data, dates]);

  // 窗口大小变化时，重新调整图表大小
  useEffect(() => {
    const handleResize = () => {
      if (chartInstance.current) {
        chartInstance.current.resize();
      }
    };

    window.addEventListener('resize', handleResize);
    
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // 更新图表数据和配置
  const updateChart = () => {
    if (!chartInstance.current || !data || !data.length) return;
    
    // 计算显示范围内的最大值、最小值和中间值
    const visibleData = data.slice(0, 30); // 假设显示最近30条数据
    let maxVal = -Infinity;
    let minVal = Infinity;
    
    visibleData.forEach(item => {
      maxVal = Math.max(maxVal, item.high);
      minVal = Math.min(minVal, item.low);
    });
    
    // 调试日志 - 打印前3条数据
    // console.log('K线数据样例:');
    // data.slice(0, 3).forEach((item, i) => {
    //   console.log(`第${i+1}条:`, 
    //     `开盘=${item.open}, 收盘=${item.close}`,
    //     `涨跌=${item.close > item.open ? '上涨' : '下跌'}`);
    // });

    // 使用提供的日期
    const displayDates = dates.length > 0 ? dates : data.map((_, i) => `Day ${i+1}`);
    
    // 处理K线数据格式 [open, close, low, high]
    const values = data.map(item => [item.open, item.close, item.low, item.high]);

    
    // 获取成交额
    const amounts = data.map(item => {
        return item.amount;
    });
    
    // 成交量数据，包含颜色信息
    const volumeData = data.map((item, index) => {
      const isUp = item.close > item.open; // 收盘价大于开盘价为上涨
      return {
        value: amounts[index],
        itemStyle: {
          color: isUp ? 'transparent' : '#14b143',  // 上涨空心(透明)，下跌实心绿色
          borderColor: isUp ? '#ef232a' : '#14b143', // 上涨边框红色，下跌边框绿色
          borderWidth: 2
        }
      };
    });
    
    // 图表配置
    const option = {
      backgroundColor: '#1a1a1a',
      animation: false,
      legend: {
        show: false  // 隐藏所有图例
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#333'
          },
          crossStyle: {
            color: '#555'
          }
        },
        backgroundColor: 'rgba(50,50,50,0.9)',
        borderWidth: 1,
        borderColor: '#555',
        padding: 10,
        textStyle: {
          color: '#fff'
        },
        position: function (pos, params, el, elRect, size) {
          const obj = {
            top: 10
          };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          return obj;
        },
        formatter: function (params) {
          if (!params || params.length === 0) return '';
          
          const param = params[0];
          const date = param.axisValue;
          const candleData = param.data;
          
          let result = `<div style="font-weight:bold;margin-bottom:3px;">${date}</div>`;
          
          if (param.seriesName === '日K') {
            // 调试日志 - 打印原始数据
            // console.log('K线数据:', candleData);
            // console.log('原始数据:', data[param.dataIndex]);
            
            result += `<div style="margin: 3px 0">
              <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ef232a;"></span>
              开盘价: ${data[param.dataIndex].open}<br/>
              <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ef232a;"></span>
              收盘价: ${data[param.dataIndex].close}<br/>
              <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ef232a;"></span>
              最低价: ${data[param.dataIndex].low}<br/>
              <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ef232a;"></span>
              最高价: ${data[param.dataIndex].high}<br/>
            </div>`;
          }
          
          // 移除了均线数据的显示
          
          // 显示成交量数据
          params.forEach(param => {
            if (param.seriesName === '成交量' && param.data) {
              const volumeValue = param.data.value / 100; // 将百万单位转换为亿元
                const color = param.data.itemStyle.borderColor; // 使用边框颜色
                result += `<div style="margin: 3px 0">
                  <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>
                  成交额: ${volumeValue.toFixed(2)}亿元
                </div>`;
            }
          });
          
          return result;
        }
      },
      axisPointer: {
        link: [{ xAxisIndex: 'all' }], // 绑定到所有xAxis
        label: {
          backgroundColor: '#777'
        }
      },
      // 移除visualMap配置，使用itemStyle来控制颜色
      grid: [
        {
          left: '5%',  // 增加左侧边距
          right: '1%',
          top: '5%',
          height: '55%'
        },
        {
          left: '5%',  // 增加左侧边距
          right: '1%',
          top: '65%',
          height: '30%'
        }
      ],
      xAxis: [
        {
          type: 'category',
          data: displayDates,
          scale: true,
          boundaryGap: false,
          axisLine: { 
            onZero: false,
            lineStyle: { color: '#555' }
          },
          axisLabel: {
            color: '#ccc'
          },
          splitLine: { show: false },
          splitNumber: 20,
          min: 'dataMin',
          max: 'dataMax',
          axisPointer: {
            z: 100
          }
        },
        {
          type: 'category',
          gridIndex: 1,
          data: displayDates,
          scale: true,
          boundaryGap: false,
          axisLine: { 
            onZero: false,
            lineStyle: { color: '#555' }
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: true, color: '#ccc' },
          splitNumber: 20,
          min: 'dataMin',
          max: 'dataMax'
        }
      ],
      yAxis:[
        {
          scale: true,
          position: 'left',
          z: 100,
          offset: 0,
          splitArea: { show: false },
          axisLine: {
            show: true,
            onZero: false,
            lineStyle: { color: '#888', width: 1, type: 'solid' }
          },
          axisTick: {
            show: true,
            lineStyle: { color: '#888' }
          },
          axisLabel: {
            show: true,
            inside: false,
            color: '#fff',
            backgroundColor: 'rgba(0,0,0,0.7)',
            padding: [2, 4],
            borderRadius: 2,
            formatter: function(value) {
              return value.toFixed(0);
            }
          },
          splitLine: { show: false }
        },
        {
          scale: true,
          gridIndex: 1,
          splitNumber: 2,
          axisLabel: { 
            show: true, 
            color: '#ccc',
            formatter: function(value) {
              return value.toFixed(2) + '亿';
            }
          },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false }
        }
      ],
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0, 1], // 绑定到K线图和成交量区域的xAxis
          start: 0,
          end: 100,
          zoomOnMouseWheel: true,
          moveOnMouseMove: true
        },
        {
          show: true,
          type: 'slider',
          xAxisIndex: [0, 1], // 绑定到K线图和成交量区域的xAxis
          start: 0,
          end: 100,
          top: '97%',
          height: 20,
          borderColor: '#555',
          fillerColor: 'rgba(80,80,80,0.5)',
          textStyle: {
            color: '#ccc'
          }
        }
      ],
      series:[
        {
          name: '日K',
          type: 'candlestick',
          data: values,
          itemStyle: {
            color0: '#54ffff',  // 目前color0表示下跌K线。下跌实心绿色。是不是新版echart用于收盘价 > 开盘价（上涨K线）
            color: 'transparent',  // 上涨空心(透明)，用于收盘价 < 开盘价（下跌K线）
            borderColor0: '#54ffff',  // 下跌边框绿色
            borderColor: '#ef232a'  // 上涨边框红色
          },
          emphasis: {
            itemStyle: {
              color0: '#54ffff',  // 下跌强调状态保持实心绿色
              color: 'transparent',  // 上涨强调状态保持空心
              borderColor0: '#54ffff',  // 下跌边框绿色
              borderColor: '#ef232a'  // 上涨边框红色
            }
          }
        },
        {
          name: 'MA5',
          type: 'line',
          data: calculateMA(5),
          symbol: 'none',
          lineStyle: {
            width: 1,
            color: '#ffffff' // 白色
          },
          silent: true // 不显示标签
        },
        {
          name: 'MA10',
          type: 'line',
          data: calculateMA(10),
          symbol: 'none',
          lineStyle: {
            width: 1,
            color: '#ffd700' // 黄色
          },
          silent: true
        },
        {
          name: 'MA20',
          type: 'line',
          data: calculateMA(20),
          symbol: 'none',
          lineStyle: {
            width: 1,
            color: '#ff69b4' // 粉色
          },
          silent: true
        },
        {
          name: 'MA60',
          type: 'line',
          data: calculateMA(60),
          symbol: 'none',
          lineStyle: {
            width: 1,
            color: '#808080' // 灰色
          },
          silent: true
        },
        {
          name: '成交量',
          type: 'bar',
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: volumeData,
          barWidth: '60%',  // 控制柱状图宽度
          // 不再需要在这里设置itemStyle，因为每个数据点都有自己的样式
          emphasis: {
            itemStyle: {
              borderWidth: 3  // 鼠标悬停时边框加粗
            }
          }
        }
      ]
    };

    // 设置图表配置 - 先清空再设置新配置
    chartInstance.current.clear();
    chartInstance.current.setOption(option, true); // 强制不合并配置
    chartInstance.current.resize(); // 强制重绘
    
    // 调试日志
    // console.log('更新K线图数据:', {
    //   dates: displayDates.slice(0, 5),
    //   values: values.slice(0, 5),
    //   volumes: volumes.slice(0, 5)
    // });
    
    // 调试日志
    // console.log('当前xAxis配置:', option.xAxis);
    // console.log('当前grid配置:', option.grid);
  };

  // 计算移动平均线
  const calculateMA = (dayCount) => {
    const result = [];
    if (!data || data.length === 0) return result;
    
    for (let i = 0; i < data.length; i++) {
      if (i < dayCount - 1) {
        result.push('-');
        continue;
      }
      let sum = 0;
      let validDays = 0;
      for (let j = 0; j < dayCount; j++) {
        if (i - j >= 0 && data[i - j] && typeof data[i - j].close === 'number') {
          sum += data[i - j].close;
          validDays++;
        }
      }
      result.push(validDays > 0 ? sum / validDays : '-');
    }
    return result;
  };

  // 计算指数移动平均线
  const calculateEMA = (period, values) => {
    const k = 2 / (period + 1);
    const emaData = [];
    let ema = values[0];
    
    for (let i = 0; i < values.length; i++) {
      if (i === 0) {
        emaData.push(ema);
      } else {
        ema = values[i] * k + ema * (1 - k);
        emaData.push(ema);
      }
    }
    return emaData;
  };
  

  return (
    <div 
      className="candlestick-chart" 
      ref={chartRef} 
      style={{ 
        width: '100%', 
        height: `${height}px`,
        overflow: 'hidden'
      }} 
    />
  );
};

export default CandlestickChart;